<template>
  <div id="addWithdrawals">
    <div class="form-box">
      <group>
        <cell title="账户类型" is-link @click.native="typeShow = true">
          <span>{{ bankname }}</span>
        </cell>
        <x-input v-if="showbankname" title="支行名称" v-model="formItem.bank" placeholder="填写您的支行信息"></x-input>
        <x-input title="账户账号" v-model="formItem.num" placeholder="支付宝或银行帐号"></x-input>
        <x-input title="真实姓名" v-model="formItem.name" placeholder="请输入真实姓名"></x-input>
        <x-input title="身份证号" v-model="formItem.card" :max="18" placeholder="请输入身份证号码"></x-input>
        <!--<x-input v-model="formItem.phone" type="tel" title=" 手机号" class="weui-vcode" placeholder="银行预留手机号" :max="11" :show-clear="false">-->
          <!--<x-button :disabled="disabled" slot="right" type="primary" mini @click.native="sendCode">{{codebtn}}</x-button>-->
        <!--</x-input>-->
        <!--<x-input title="短信验证码" v-model="formItem.code" :max="4" placeholder="请输入短信验证码"></x-input>-->
      </group>
    </div>
    <div style="margin: 0.3rem 0.2rem 0.2rem 0.2rem">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="handleReg">{{btn}}</x-button>
    </div>

    <div v-transfer-dom>
      <popup v-model="typeShow" position="bottom" style="height: 100%;background: #f3f4f5;">
        <div class="map-header">
          <div style="flex: 1;">
            <x-input v-model="search" placeholder="输入查询银行" style="border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0.1rem 0.2rem;">
            </x-input>
          </div>
          <div style="width: 1rem; text-align: center;" @click="typeShow = false">取消</div>
        </div>
        <div class="banklist">
          <ul style="margin: 0; padding: 0;">
            <li
              @click="selectBank(index)"
              v-if="item.name.indexOf(search) >= 0"
              class="vux-1px-b"
              :key="index"
              v-for="(item, index) in typeList">{{ item.name }}</li>
          </ul>
        </div>
      </popup>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import $config from '../libs/config'
  import { checkTel, checkCard } from '../libs/fn'
  import { Cell, TransferDom } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    components: {
      PubHeader,
      Cell
    },
    created() {
      this.$http.post($config.host + '/api/Bank/getAllBank', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const {code, data, msg} = res.data
        if(code == '1') {
          this.typeList = data.bank
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    data() {
      return {
        search: '',
        loading: false,
        showbankname: false,
        typeList: [],
        disabled: false,
        btn: '添加',
        typeShow: false,
        codebtn: '发送验证码',
        bankname: '支付宝',
        formItem: {
          bank_id: 1,
          bankname: '',
          bank: '',
          num: '',
          name: '',
          card: '',
        }
      }
    },
    methods: {
      selectBank(index) {
        this.formItem.bank_id = this.typeList[index].id
        this.formItem.bankname = this.typeList[index].name
        this.bankname = this.typeList[index].name
        this.showbankname = this.typeList[index].id != '1' ? true: false
        this.typeShow = false
      },
      sendCode() {
        if(!checkTel(this.formItem.phone)) {
          this.$vux.toast.text('手机号码格式不正确', 'middle')
          return false
        }
        this.disabled = true
        this.codebtn = '正在发送...'

        this.$http.post($config.host + '/api/Userbase/getMessage', qs.stringify({
          phone: this.formItem.phone,
          type: 2,
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token
        })).then((res) => {
          const {code, msg} = res.data
          if(code == 1) {
            let i = $config.sendCodeTimer
            let timer = setInterval(() => {
              i--
              this.codebtn = i+'s重新发送'
              if(i <= 0) {
                clearInterval(timer)
                this.disabled = false
                this.codebtn = '重新发送'
              }
            }, 1000)
          } else {
            this.disabled = false
            this.codebtn = '获取验证码'
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
          this.disabled = false
          this.codebtn = '获取验证码'
          this.$vux.toast.text($config.errMsg, 'middle')
        })

      },
      handleReg() {
        if(!this.formItem.bank_id){
          this.$vux.toast.text('请选择账户类型', 'middle')
          return false
        }

        if(this.formItem.bank_id != '1'){
          if(!this.formItem.num.match(/^\d{15,23}$/)){
            this.$vux.toast.text('银行帐号格式错误', 'middle')
            return false
          }
        } else {
          if(this.formItem.num.length < 4){
            this.$vux.toast.text('请填写正确的账户帐号', 'middle')
            return false
          }
        }


        if (!this.formItem.name.match(/^[\u4e00-\u9fa5]{0,}$/) || !this.formItem.name){
          this.$vux.toast.text('请核对您的姓名', 'middle')
          return false
        }

        const cardIDMsg = checkCard(this.formItem.card)
        if(!cardIDMsg.status){
          this.$vux.toast.text(cardIDMsg.msg, 'middle')
          return false
        }

        this.loading = true
        this.btn = '正在添加,请勿操作'
        const {
          bank_id,
          bankname,
          bank,
          num,
          name,
          card
        } = this.formItem
        this.$http.post($config.host + '/api/Bank/addBankCard', qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid,
          bank_name: bankname,
          bank,
          num,
          name,
          card,
          type: bank_id == 1? 2: 1
        })).then((res) => {
          const {code, msg} = res.data
          if(code == '1') {
            this.$vux.toast.text('添加成功', 'middle')
            this.$router.go(-1)
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
          this.loading = false
          this.btn = '重新添加'
        }).catch((err) => {
          this.$vux.toast.text($config.errMsg, 'middle')
          this.loading = false
          this.btn = '重新添加'
        })

      }
    }
  }
</script>
<style scoped>
  .reg{
    margin: 0.2rem;
    background: #fff;
    height: auto;
    box-shadow: 0px 0px 0.15rem rgba(0, 0, 0, 0.07);
  }
  .map-header{
    position: fixed;
    z-index: 7;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background: #fff;
    display: flex;
    align-items: center;
    transition: all 0.4s;
    box-shadow: 0px 0px 0.1rem rgba(0, 0, 0, 0.15);
  }
  .banklist{
    background: #fff;
    margin-top: 1rem;
    padding-left: 0.2rem;
  }
  .banklist li{
    height: 0.9rem;
    line-height: 0.9rem;
    padding-left: 0.1rem;
  }
</style>
